<template>
  <div class="home">
    <div class="toper">
      <p>添加审核</p>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>社区管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表审核</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="body">
      <div class="box">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="申请人员" prop="applyName">
            <el-input v-model="ruleForm.applyName"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="applyPwd">
            <el-input v-model="ruleForm.applyPwd"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="ruleForm.sex" placeholder="请选择">
              <el-option label="男" :value="1"></el-option>
              <el-option label="女" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="ruleForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="证件号码" prop="idNumber">
            <el-input v-model="ruleForm.idNumber"></el-input>
          </el-form-item>
          <el-form-item label="房屋地址" prop="houseNum">
            <el-select
              v-model="ruleForm.house.houseNum"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in hAddress"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="用户类型" prop="ownerType">
            <el-radio-group v-model="ruleForm.ownerType">
              <el-radio label="2">业主</el-radio>
              <el-radio label="1">家庭成员</el-radio>
              <el-radio label="0">租户</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item>
            <el-button
              type="success"
              style="background-color: #0bb197"
              @click="submitForm('ruleForm')"
              >立即添加</el-button
            >
            <el-button @click="resetForm('ruleForm')" class="reset"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 添加返回地址
      hAddress: [],
      ruleForm: {
        applyName: "",
        applyPwd: "",
        sex: "",
        phone: "",
        idNumber: "",
        house: {
          houseNum: "",
        },
        applyTime: "",
        ownerType: "2",
      },
      rules: {
        applyName: [
          { required: true, message: "请输入申请人员名称", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        applyPwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, message: "至少6个字符！", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { min: 11, max: 11, message: "长度为11个字符", trigger: "blur" },
        ],
        idNumber: [
          { required: true, message: "请输入证件号码", trigger: "blur" },
          { min: 10, max: 10, message: "长度在10个字符", trigger: "blur" },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        ownerType: [
          { required: true, message: "请选择用户类型", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    // 渲染房屋位置
    getHouseNames() {
      this.$axios({
        url: "/smart/house/list",
        methods: "get",
        params: {
          pageNum: 1,
          pageSize: 1000000,
          houseNum: "",
          houseName: "",
          houseType: "",
          houseAddress: "",
          houseOwner: "",
          state: "",
        },
      }).then(({ data }) => {
        data.data.list.forEach((v, i) => {
          let item = {
            value: v.houseNum,
            label: v.houseAddress,
          };
          this.hAddress.push(item);
        });
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.ownerType = Number(this.ruleForm.ownerType);
          this.$axios({
            url: "/smart/userApply/add01",
            method: "post",
            data: this.ruleForm,
          }).then(({ data }) => {
            if (data.code == "00000") {
              this.$message.success("添加成功");
            } else {
              this.$message.error("添加失败");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  mounted: function () {
    this.getHouseNames();
  },
};
</script>
<style scoped lang="less">
.home {
  height: 95%;
  margin: 20px 20px 0px 20px;
  .toper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    p {
      margin-bottom: 20px;
      color: #333333;
    }
  }
  .body {
    width: 100%;
    background-color: #ffffff;
    border-radius: 8px;
    .box {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 50px;
      .reset {
        background-color: white;
        color: #c0c4cc;
        border: 1px solid #c0c4cc;
      }
      .reset:hover {
        color: #0bb197;
      }
      .el-col-2 {
        margin: 0px 10px 0px 10px;
        width: 1%;
      }
    }
  }
}
</style>
